@{
    ViewData["Title"] = "素描,素描画,素描图片,在线素描生成";
    ViewBag.keywords = "素描、素描画、素描图片、在线素描生成、素描生成、手工素描、手工素描生成、人工素描、人工素描生成、素描作品";
    ViewBag.description = "素描、素描画、素描图片、在线素描生成、素描生成、手工素描、手工素描生成、人工素描、人工素描生成";
var host = Appsettings.app("BaseFile:HostUrl");}

<div class="layui-row" style="text-align:center;">
    <div class="layui-inline" style="margin:10px auto;text-align:center; ">
        <label class="layui-form-label">模糊度：</label>
        <div class="layui-input-inline">
            <input id="strength" class="layui-input" type="number" min="1" value="10" placeholder="10" />
        </div>
        <div class="layui-input-inline">
            <button id="action" class="layui-btn layui-btn-primary" disabled>确定</button>
        </div>
    </div>
</div>
<div class="layui-row" style="text-align: center;">
    <div class="layui-col-xs12 layui-col-sm12 layui-upload-drag" style="text-align: center;">
        <div id="dropper" class="dropper" title="把您的照片拖到这儿，即可生成手绘图">
            <p><span class="glyphicon glyphicon-plus"></span></p>
            <p>点击选择图片</p>
            <p>或者把您的照片拖到这儿</p>
            <p>即可生成手绘图</p>
        </div>
        <input type="file" id="file" style="display: none;" name="files" accept="image/*" onchange="drop_event(this.files);" title="Click to upload qrcode">
    </div>
</div>
<div class="layui-row" style="text-align: center;">
    <div class="layui-col-xs12 layui-col-sm12 " style="text-align: center;margin:10px 0px;">
        <div class="panel-body">
            <canvas class="img-responsive" style="border: 1px solid #CCC;width:100%;height:50%;" id="canvas"></canvas>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm12" style="text-align: center;">
        <a id="download" download="sketch.png" target="_blank" class="layui-btn layui-btn-default" href="javascript: void(0);">下载手绘图</a>
    </div>
</div>
@section Scripts{
<script src="@host/lib/sketching/sketching.js"></script><script>var toggleActionButton = function (status){if (status){action.classList.add('btn-primary');action.disabled = false;}else{action.classList.remove('btn-primary');action.disabled = true;}}var doSketch = function (){var st = Math.abs(strangth.value || 5);var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);sk.sketch(imgData,st);ctx.putImageData(imgData,0,0);}var defaultWidth = 640,defaultHeight = 480;var setCanvasSize = function (width,height){var scale = height / width,defaultScale = defaultHeight / defaultWidth;if (scale >= defaultScale && height >= defaultHeight){height = defaultHeight;width = height / scale;}if (scale <= defaultScale && width >= defaultWidth){width = defaultWidth;height = width * scale;}canvas.width = width;canvas.height = height;}var drawImage = function (img){toggleActionButton(false);setTimeout(function (){setCanvasSize(img.width,img.height);ctx.clearRect(0,0,canvas.width,canvas.height);ctx.drawImage(img,0,0,canvas.width,canvas.height);doSketch();download.href = canvas.toDataURL();toggleActionButton(true);},0);}var canvas = document.getElementById('canvas'),action = document.getElementById('action'),download = document.getElementById('download'),strangth = document.getElementById('strength'),dropper = document.getElementById('dropper'),ctx = canvas.getContext('2d'),cacheImg;function drop_event(files){var file = files[0] var reader = new FileReader();reader.onload = function (e){var img = new Image();img.onload = function (){cacheImg = this;drawImage(this);}img.src = e.target.result;}reader.onerror = function (e){var code = e.target.error.code;if (code === 2){alert('please don\'t open this page using protocol fill:///');}else{alert('error code:' + code);}}reader.readAsDataURL(file);}dropper.addEventListener('click',function (e){e.preventDefault();document.getElementById("file").click();},false);dropper.addEventListener('drop',function (e){e.preventDefault();var files = e.dataTransfer.files;drop_event(files);},false);dropper.addEventListener('dragover',function (e){e.preventDefault();},false);dropper.addEventListener('dragenter',function (e){e.preventDefault();},false);action.addEventListener('click',function (e){if (cacheImg){drawImage(cacheImg);}else{alert('please select a picture first')}},false);</script>
}
